<template>
    <view>
        <u-navbar style="margin-top: 10px;" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
            <view slot="left" style="display: flex;">
                <u-icon name="arrow-left" size="24"></u-icon>
                <text
                    style=" line-height: 27px; text-align: center; color: #000;width: 100%;margin-left: 20rpx;">试题练习</text>
            </view>
            <view slot="center">

            </view>
            <view slot="right" style="margin-right: 200rpx;position: relative;">
                <image style="width: 46rpx;" src="../../static/images/setUp.svg" mode="" @click="isSetUp = !isSetUp">
                </image>
                <view v-if="isSetUp"
                    style="width: 240rpx;padding:20rpx;box-shadow: 0px 0px 9px 0px #0000001A;position: absolute;top: 300rpx;right: -120rpx;background-color: #fff;">
                    <view style="flex-direction: row;display: flex;justify-content: space-around;"
                        @click="fontModal = true">
                        <image style="width: 32rpx;height: 36rpx;" src="../../static/images/font.svg" mode="">
                        </image>
                        <text style="margin-left: 20rpx; text-align: center;width: 60%;">字号设置</text>
                    </view>
                    <view style="flex-direction: row;display: flex;margin: 30rpx 0;justify-content: space-around;"
                        @click="showCalculator">
                        <image style="width: 32rpx;height: 36rpx;" src="../../static/images/calculator.svg" mode="">
                        </image>
                        <text style="margin-left: 20rpx; text-align: center;width: 62%;">计算器</text>
                    </view>
                    <view style="flex-direction: row;display: flex;justify-content: space-around;">
                        <text>自动换题</text>
                        <u-switch v-model="automatic" activeColor="#37B874" @change="change" size="20"></u-switch>
                    </view>
                    <view style="flex-direction: row;display: flex;justify-content: space-around;margin-top: 30rpx;">
                        <text>显示答案</text>
                        <u-switch v-model="isAnswer" activeColor="#37B874" size="20"></u-switch>
                    </view>
                </view>
            </view>
        </u-navbar>
        <!-- <view :style="{ position: 'relative', height: windowHeight + 'px' }">  -->
        <view :style="{ height: windowHeight - 100 + 'px', overflowY: 'auto', background: '#fff' }"
            @click="isSetUp = false" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
            <view :style="{ padding: '0 40rpx 60rpx 40rpx', backgroundColor: '#FFF', }">
                <view style="border-radius: 10rpx;  padding: 30rpx 0rpx;">
                    <!-- <text style="border: 1px solid #37B874;border-radius: 20px 20px 20px 0;padding: 10rpx 20rpx;background-color: #F3FBF7">单选</text> -->
                    <view class="questionText"
                        :style="{ fontSize: fontSize + 'rpx', lineHeight: (fontSize + 12) + 'rpx', flexDirection: 'row', overflow: 'auto', }">
                        <!-- {{
                                onChangeDict(showQuestion.type, mapDictCodesData.allQuestionType)}} -->

                        <!-- {{ showQuestion.itemNo }} -->
                        <!-- <text style="background-color: #EEF7FF;border-radius: 20rpx;padding: 6rpx 10rpx;">{{showQuestion.itemTypeName}}</text> -->
                        <view
                            style="border: 1px solid #37B874;box-sizing: border-box;border-radius: 20px 20px 20px 0;padding: 5rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin-bottom:40rpx;">
                            {{ onChangeDict(showQuestion.type, mapDictCodesData.allQuestionType) }}</view>
                        <!-- {{ showQuestion.itemNo }}、 -->
                        <u-parse :content="showQuestion.itemText" style="text-align: justify"></u-parse>
                        <!-- <rich-text :nodes="showQuestion.itemText"></rich-text> -->
                        <!-- <view style="flex: 1;">
                            
                        </view> -->
                    </view>


                </view>
                <RadioQuestion
                    v-if="['判断题', '单选题'].includes(showQuestion.itemTypeName) || ['0101', '0201'].includes(showQuestion.itemType)"
                    :showQuestion="showQuestion" :selectAnswer="selectAnswer" :windowHeight="windowHeight"
                    :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer"></RadioQuestion>
                <CheckBoxQuerstion
                    v-else-if="showQuestion.itemTypeName === '多选题' || ['0301'].includes(showQuestion.itemType)"
                    :showQuestion="showQuestion" :selectAnswer="selectAnswer" :windowHeight="windowHeight"
                    :fontSize="fontSize" :showAnalysis="showQuestion.stuAnswer"></CheckBoxQuerstion>
                <view v-else-if="['简答题', '填空题', '计算题', '论述题', '绘图题'].includes(showQuestion.itemTypeName)"
                    :style="{ overflow: 'auto', marginTop: '30rpx' }">
                    <view class="questionTextItem">
                        <u--textarea v-model="selectAnswer" placeholder="请输入答案" autoHeight
                            border="bottom"></u--textarea>
                    </view>
                </view>

                <view v-else-if="['案例题', '情景题', '计算分析'].includes(showQuestion.itemTypeName)"
                    :style="{ overflow: 'auto', marginTop: '30rpx', marginBottom: '100rpx' }">
                    <view>
                        <view
                            style="width: 100%; flex-direction: row; justify-content: space-between; margin: 0rpx 0rpx 30rpx;">
                            <view @click="onAnswerItem('top', true)" class="childText" style="width: 30%;">上一小题
                            </view>
                            <view class="childText" style="width: 36%;">
                                {{ '当前第' + (childIndex + 1) + '/' + showQuestion.children.length + '小题' }}
                            </view>
                            <view @click="onAnswerItem('bottom', true)" class="childText" style="width: 30%;">下一小题
                            </view>
                        </view>
                        <view style="padding: 0rpx 30rpx; border-radius: 10rpx; background-color: #FFF;">
                            <view class="questionText"
                                :style="{ fontSize: fontSize + 'rpx', lineHeight: (fontSize + 12) + 'rpx', flexDirection: 'row' }">
                                <view style="margin-right: 20rpx">
                                    {{ (childIndex + 1) + ' ) ' }}
                                </view>
                                <rich-text :nodes="showQuestion.children[childIndex].itemText"></rich-text>
                            </view>
                        </view>

                        <RadioQuestion v-if="['判断题', '单选题'].includes(showQuestion.children[childIndex].itemTypeName)"
                            :showQuestion="showQuestion.children[childIndex]" :selectAnswer="selectAnswer"
                            :windowHeight="windowHeight" :fontSize="fontSize"></RadioQuestion>
                        <CheckBoxQuerstion v-else-if="showQuestion.children[childIndex].itemTypeName === '多选题'"
                            :showQuestion="showQuestion.children[childIndex]" :selectAnswer="selectAnswer"
                            :windowHeight="windowHeight" :fontSize="fontSize"></CheckBoxQuerstion>
                        <view
                            v-else-if="['简答题', '填空题', '计算题', '论述题', '绘图题'].includes(showQuestion.children[childIndex].itemTypeName)"
                            :style="{ overflow: 'auto', marginTop: '30rpx' }">
                            <view class="questionTextItem">
                                <u--textarea v-model="selectAnswer" placeholder="请输入答案" autoHeight
                                    border="bottom"></u--textarea>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- <view v-if="['判断题', '单选题'].indexOf(showQuestion.itemTypeName)===-1" @click="onOk">
					确认答案
				</view> -->
                <view v-if="showQuestion.stuAnswer && isAnswer"
                    style="background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);border-radius: 12px;display: flex;align-items: center;padding:20rpx 40rpx;margin-top: 40rpx;">
                    正确答案：<text style="color: #37B874;margin-right: 20rpx">{{ showQuestion.answer }} </text> 您的选择：<text
                        :style="{ color: showQuestion.answer == showQuestion.stuAnswer ? '#37B874' : 'red' }">{{
                            showQuestion.stuAnswer }}</text>
                </view>
            </view>
            <view v-if="showQuestion.stuAnswer && isAnswer"
                :style="{ padding: '30rpx 40rpx 60rpx 40rpx', backgroundColor: '#FFF', marginTop: '40rpx' }">
                <view>
                    <view style="display: flex;align-items: center;">
                        <!-- <image style="width: 72rpx;height: 72rpx;margin-right: 10rpx;"
                                src="../../static/images/practice/analysis.png" mode=""></image> -->
                        <text>试题解析</text>
                    </view>
                    <view style="font-size: 14px;margin-top: 20rpx;">
                        <rich-text :nodes="showQuestion.analysis ? showQuestion.analysis : '暂无'"></rich-text>
                    </view>
                </view>
                <!-- <view style="margin-top: 40rpx;">
					<view style="display: flex;align-items: center;">
						<image style="width: 72rpx;height: 72rpx;margin-right: 10rpx;"
							src="../../static/images/practice/folder.png" mode=""></image>
						<text>知识点</text>
					</view>
					<view style="font-size: 14px;margin-top: 20rpx;">
						企业人力资源管理师四级理论知识>企业人力
						资源管理师四级>企业人力资源
					</view>
				</view> -->
            </view>
        </view>
        <view
            :style="{ position: 'absolute', height: '120rpx', backgroundColor: ' #fff', bottom: 0, padding: '40rpx', display: 'flex', justifyContent: isCollection ? 'space-around' : 'space-between', alignItems: 'center', width: windowWidth - 40 + 'px' }">
            <view @click="onCollectItem">
                <text v-if="!showQuestion.collectStatus" style="font-size: 20px;">☆</text>
                <text v-else style="color:#FFB800;font-size: 20px">★</text>
                <text>收藏</text>
            </view>

            <u-icon name="arrow-left" size="20" color="#333333" @click="onAnswerItem('top', '', true)"></u-icon>
            <view class="" @click="showExamCount = true">{{ showQuestion.itemNo }}/{{ questionNavData.length }}</view>
            <u-icon name="arrow-right" size="20" color="#333333" @click="onAnswerItem('bottom', '', true)"></u-icon>

            <view style="display: flex;" @click="showExamCount = true">
                <view style="display: flex;">
                    <u-icon name="checkmark-circle-fill" size="20" color="#37B874"></u-icon>
                    <text style="margin:0 40rpx 0 20rpx;">{{ correct }}</text>
                </view>
                <view style="display: flex;">
                    <u-icon name="close-circle-fill" size="20" color="#FF3D31"></u-icon>
                    <text style="margin-left: 20rpx;">{{ error }}</text>
                </view>
            </view>
        </view>

        <u-popup :show="showExamCount" @close="showExamCount = false" :round="0" mode="bottom">

            <view style="padding: 46rpx">
                <view style="text-align: center;">试题导航</view>
                <view
                    style="display: flex;justify-content: space-between;margin-top: 40rpx;margin-bottom: 60rpx;align-items: center;">
                    <!-- <view>
						<text>☆</text>
						<text>收藏</text>
					</view> -->

                    <view v-if="video" style="display: flex;justify-content: space-between;">
                        <button type="default" hover-class="hoverClass"
                            style="color:#fff; width: 200rpx; line-height: 60rpx;background-color: #37B874;" class="gradient-button" @click="() => {
                                onClearUpPractiseHistory()
                            }">清除练习</button>

                    </view>
                    <view style="display: flex;">
                        <view style="display: flex;">
                            <u-icon name="checkmark-circle-fill" size="20" color="#37B874"></u-icon>
                            <text style="margin:0 40rpx 0 20rpx;">{{ correct }}</text>
                        </view>
                        <view style="display: flex;">
                            <u-icon name="close-circle-fill" size="20" color="#FF3D31"></u-icon>
                            <text style="margin-left: 20rpx;">{{ error }}</text>
                        </view>
                    </view>
                    <view class="">{{ showQuestion.itemNo }}/{{ questionNavData.length }}</view>
                </view>
                <view :style="{ height: windowHeight * 0.4 + 'px', overflow: 'auto' }">
                    <u-grid :border="false" col="5">
                        <u-grid-item v-for="(item, index) in questionNavData" :key="index">
                            <view @click="onSelectQuestion(item, index)"
                                :class="item.hasAnswer ? item.correct ? 'successExam' : 'errorExam' : 'noEditExam'"
                                :style="{ width: '60rpx', height: '60rpx', alignItems: 'center', justifyContent: 'center', borderRadius: '12rpx', color: '#999999', marginBottom: '16rpx', border: showQuestion.itemNo === item.itemNo ? '4rpx solid rgba(10, 10, 10, .6)' : '' }">
                                {{ index + 1 }}
                            </view>
                        </u-grid-item>
                    </u-grid>

                </view>
            </view>
        </u-popup>
        <u-popup :show="fontModal" mode="bottom" @close="fontModal = false; isSetUp = false" :round="10" closeable>
            <view style="padding: 40rpx;align-items: center;text-align: center;">
                <view>
                    字号设置
                </view>
                <view style="width: 100%;display: flex;align-items: center;">
                    <image style="width: 40rpx;height: 40rpx;margin-top: -20rpx;" src="../../static/images/narrow.svg"
                        mode="" @click="editFontSize(false)"></image>
                    <view style="width: 80%;margin: 60rpx 0;">
                        <u-steps :current="current" dot activeColor="#37B874">
                            <u-steps-item title="较小"></u-steps-item>
                            <u-steps-item title="标准"></u-steps-item>
                            <u-steps-item title="中等"></u-steps-item>
                            <u-steps-item title="较大"></u-steps-item>
                            <u-steps-item title="特大"></u-steps-item>
                        </u-steps>
                    </view>
                    <image style="width: 40rpx;height: 40rpx;margin-top: -20rpx;" src="../../static/images/enlarge.svg"
                        mode="" @click="editFontSize(true)"></image>
                </view>
            </view>
        </u-popup>
        <UniPopup type="center" ref="calculator" :maskClick="false" style="z-index: 1000;">
            <view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end">
                <view style="width: 90%; height: 72vh">
                    <h-calculator @closeCalculatorPopup="showCalculator" />
                </view>
            </view>
        </UniPopup>
        <u-popup :show="submitModal" :round="10" mode="bottom" @close="submitModal = false">
			<view style="padding: 40rpx;align-items: center;text-align: center;">
				<view style="font-size: 18px;">
					温馨提示
				</view>
				<image style="width: 421rpx;height: 320rpx" src="../../static/images/practice.svg"></image>
				<view style="margin-top: 40rpx;">当前练习已全部完成，可在试题导航中清空练习记录重新练习</view>
			</view>
		</u-popup>
        <u-loading-page fontSize="32rpx" :loading="loading" loading-text="正在加载..."></u-loading-page>
    </view>
    <!-- </view> -->

</template>

<script>
import RadioQuestion from '../common/RadioQuestion.vue'
import UniPopup from '../../components/uni-popup/uni-popup.vue'
import CheckBoxQuerstion from '../common/CheckBoxQuerstion.vue'
import { getItemNavigation, getItem, cancelCollectItem, getAnswer, collectItem, collectItems, getItemNavigations, getItems, getAnswers, cancelCollectItems, getItemVideo, getAnswerVideo, collectItemVideo, cancelCollectItemVideo, clearUpPractiseHistory } from '../../services/PracticeTestingService'
import { notificationFun } from '../../utils/PrjUtils.js'
import {
    mapDictCodes
} from '../../services/ServerService.js'
import { getArrObjectByProperty } from '../../utils/PrjUtils.js'
export default {
    components: {
        RadioQuestion,
        CheckBoxQuerstion,
        UniPopup,
    },
    data() {
        return {
            mapDictCodesData: {},
            loading: true,
            showExamCount: false, //试题导航状态
            selectAnswer: '',
            windowWidth: '',
            windowHeight: '',
            questionNavData: [

            ],
            fontSize: 38, // 题目字体大小
            showQuestion: {},
            planId: '', // 计划id
            practiceUuid: '', //uuid
            itemNo: 1, // 题号
            publishType: '',
            structUuid: '',
            showAnalysis: false,
            itemUuid: '',
            reached: 0, // 已达题目数量
            correct: 0,//正确数量
            error: 0,//错误数量
            exerciseType: '',
            isCollection: false, //是否是错题
            video: '', // 是否事视频下的题
            isSetUp: false, // 下拉
            automatic: false, //自动换题
            fontModal: false, // 放大缩小字体状态
            current: 0,
            calculatorShow: false, // 计算器状态
            collection: false, // 是否是收藏
            startX: 0, // 触摸开始的X坐标
            endX: 0, // 触摸结束的X坐标
            isAnswer: false,//是否显示答案
            itemType: '', //题型判断
            tableName: '', //来自哪个模块
            submitModal:false,
        }
    },
    onLoad(option) {
        console.log(option, 'option')
        this.isCollection = option.isCollection || ''
        this.collection = option.collection || false
        this.video = option.video || ''
        if (option.isCollection) {
            this.exerciseType = option.exerciseType
        }
        this.practiceUuid = option.practiceUuid
        // this.structUuid = option.structUuid
        // this.onGetItem(option.practiceUuid,option.structUuid,this.itemNo,option.planId,option.publishType,)

        // this.planId = option.planId
        this.publishType = option.publishType
        this.itemType = option.itemType || ''
        this.tableName = option.tableName || ''
        this.onMapDictCodes()
        this.onGetItemNavigation(option.practiceUuid, 0, true, true)

        uni.getSystemInfo({
            success: (res) => {
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
            }
        })
    },
    mounted() {
        console.log('this.$refs.calculator', this.$refs);
    },
    methods: {
        onMapDictCodes() {
            mapDictCodes('allQuestionType').then(res => {
                this.mapDictCodesData = res
            })
        },
        change(e) {
            console.log('change', e);
        },
        onChangeDict(val, dict) {
            if (dict) {
                return getArrObjectByProperty(dict, 'value', val)?.label || ''
            }
        },
        touchStart(event) {
            this.startX = event.touches[0].clientX;
        },
        touchMove(event) {
            // 移动时不做处理
        },
        // 清除练习
        onClearUpPractiseHistory() {
            clearUpPractiseHistory({ practiceUuid: this.practiceUuid, type: this.exerciseType, }).then(res => {
                uni.navigateBack({
                    delta: 1
                })
                notificationFun('清除成功')

            })
        },
        touchEnd(event) {
            this.endX = event.changedTouches[0].clientX;
            if (this.endX - this.startX > 50) { // 右滑
                // this.currentQuestion = (this.currentQuestion + 1) % this.questions.length;
                console.log('右滑');

                this.onAnswerItem('top', '', true)

            } else if (this.startX - this.endX > 50) { // 左滑
                // this.currentQuestion = (this.currentQuestion - 1 + this.questions.length) % this.questions.length;
                console.log('左滑');
                this.onAnswerItem('bottom', '', true)
            }
        },
        showCalculator() { // 计算器
            if (!this.calculatorShow) {
                this.calculatorShow = true
                console.log('this.$refs.calculator', this.$refs)
                this.$refs.calculator.open();
            } else {
                this.isSetUp = false
                this.calculatorShow = false
                this.$refs.calculator.close();
            }
        },
        //查询题目列表
        onGetItemNavigation(practiceUuid, index, flag, isWrong) {
            if (this.isCollection) {
                getItemNavigations({ practiceUuid, type: this.exerciseType, itemType: this.itemType || '', tableName: this.tableName }).then(res => {
                    this.loading = false
                    if (res.length) {
                        let arr = []
                        arr = res.filter(item => item.hasAnswer)
                        this.correct = arr.filter(item => item.correct).length
                        this.error = arr.filter(item => !item.correct).length
                        this.reached = arr.length
                        // correct
                        if (flag) {
                            let index = res.findIndex(item => item.correct == null)
                            if (index === -1) {
                                index = 0
                            }

                            this.onGetItem(this.practiceUuid, this.structUuid, index + 1, this.planId, this.publishType,)
                        }

                        this.questionNavData = res
                    }
                    else {
                        uni.navigateBack()
                    }
                    // if (res.length) {
                    //     res.forEach((item, index) => {
                    //         item.itemNo = index + 1
                    //         item.type = item.itemType
                    //     })
                    //     console.log(res, 'resres')
                    //     let arr = []
                    //     arr = res.filter(item => item.hasAnswer)
                    //     this.correct = arr.filter(item => item.correct).length
                    //     this.error = arr.filter(item => !item.correct).length
                    //     this.reached = res.length
                    //     this.questionNavData = res
                    //     if (isWrong) {

                    //         let nowIndex = res.findIndex(item => !item.stuAnswer)
                    //         if (nowIndex === -1) {
                    //             nowIndex = 0
                    //         }
                    //         this.showQuestion = res[nowIndex]
                    //         this.selectAnswer = res[nowIndex].stuAnswer || ''
                    //     } else {
                    //         this.showQuestion = res[index]
                    //         this.selectAnswer = res[index].stuAnswer || ''
                    //     }

                    // } else {
                    //     uni.navigateBack()
                    // }

                })
                // .catch(err=>{
                // 	setTimeout(() => {
                // 		uni.navigateBack({
                // 		  delta: 1,//返回层数，2则上上页
                // 		})
                // 	}, 2000)
                // })
            } else {
                getItemNavigation({ practiceUuid: practiceUuid || '' }).then(res => {

                    if (res.length) {
                        let arr = []
                        arr = res.filter(item => item.hasAnswer)
                        this.correct = arr.filter(item => item.correct).length
                        this.error = arr.filter(item => !item.correct).length
                        this.reached = arr.length
                        // correct
                        if (flag) {
                            let index = res.findIndex(item => item.correct == null)
                            if (index === -1) {
                                index = 0
                            }
                            this.onGetItem(this.practiceUuid, this.structUuid, index + 1, this.planId, this.publishType,)
                        }

                        this.questionNavData = res
                    }
                    else {
                        notificationFun('暂无收藏数据')
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1,//返回层数，2则上上页
                            })
                        }, 2000)
                    }



                }).catch(err => {
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1,//返回层数，2则上上页
                        })
                    }, 2000)
                })
            }

        },
        // 字体放大缩小
        editFontSize(type) {
            if (type) {
                if (this.current < 4) {
                    this.current++
                    this.fontSize = (this.fontSize + 4) >= 52 ? 52 : (this.fontSize + 4)
                }

            } else {
                if (this.current > 0) {
                    this.current--
                    this.fontSize = (this.fontSize - 4) <= 20 ? 20 : (this.fontSize - 4)
                }

            }
        },
        // 收藏试题
        onCollectItem() {
            console.log(this.showQuestion)
            if (this.collection && this.showQuestion.collectStatus) {
                cancelCollectItems({ exerciseId: this.showQuestion.exerciseId, type: this.exerciseType }).then(res => {
                    notificationFun('取消收藏成功')
                    this.onGetItemNavigation(this.practiceUuid, 0, true, true)
                })
            } else {

                if (!this.showQuestion.collectStatus) {
                    console.log(this.exerciseType, 'exerciseType')
                    if (this.exerciseType == 1) {
                        collectItems({ exerciseId: this.showQuestion.exerciseId }).then(res => {
                            notificationFun('收藏成功')
                            this.onGetItem(this.practiceUuid, this.structUuid, this.showQuestion.itemNo, this.planId, this.publishType)
                        })
                    } else if (this.video) {
                        collectItemVideo({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid }).then(res => {
                            notificationFun('收藏成功')
                            this.onGetItem(this.practiceUuid, this.structUuid, this.showQuestion.itemNo, this.planId, this.publishType)
                        })
                    } else {
                        collectItem({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid }).then(res => {
                            notificationFun('收藏成功')
                            this.onGetItem(this.practiceUuid, this.structUuid, this.showQuestion.itemNo, this.planId, this.publishType)
                        })
                    }
                } else {
                    if (this.video) {
                        cancelCollectItemVideo({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid }).then(res => {
                            notificationFun('取消收藏成功')
                            this.onGetItem(this.practiceUuid, this.structUuid, this.showQuestion.itemNo, this.planId, this.publishType)
                        })
                    } else {
                        cancelCollectItem({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid }).then(res => {
                            notificationFun('取消收藏成功')
                            this.onGetItem(this.practiceUuid, this.structUuid, this.showQuestion.itemNo, this.planId, this.publishType)
                        })
                    }

                }
            }

        },
        // 查询当前试题
        onGetItem(practiceUuid, structUuid, itemNo, planId, publishType,) {
            console.log(this.isCollection, 'this.isCollection')
            if (this.isCollection) {
                getItems({ practiceUuid: practiceUuid, type: this.exerciseType, itemNo: itemNo, itemType: this.itemType || '', tableName: this.tableName }).then(res => {

                    if (res.stuAnswer) {
                        this.selectAnswer = res.stuAnswer
                    } else {
                        this.selectAnswer = ''
                    }
                    res.itemText = res.itemText.replace(/<img/gi, '<img class="richImg" style="max-width:100%;height:auto;margin:0 auto;display:block"')
                    // `<text style="float: left; border: 1px solid #37B874;box-sizing: border-box;border-radius: 20px 20px 20px 0;padding: -4rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin:0 5px -4rpx 0">${this.onChangeDict(res.type, this.mapDictCodesData.allQuestionType)}</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` 
                    res.itemText = `</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` + res.itemText
                    this.showQuestion = res
                    this.itemUuid = res.itemUuid
                    this.showExamCount = false
                    this.loading = false
                    // this.onGetItemNavigation(this.practiceUuid,'')
                })
            } else if (this.video) {
                getItemVideo({ practiceUuid: practiceUuid, itemNo: itemNo }).then(res => {

                    if (res.stuAnswer) {
                        this.selectAnswer = res.stuAnswer
                    } else {
                        this.selectAnswer = ''
                    }
                    res.itemText = res.itemText.replace(/<img/gi, '<img class="richImg" style="max-width:100%;height:auto;margin:0 auto;display:block"')
                    // `<text style="float: left;border: 1px solid #37B874;box-sizing: border-box; border-radius: 20px 20px 20px 0;padding: -4rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin:0 5px -4rpx 0">${this.onChangeDict(res.type, this.mapDictCodesData.allQuestionType)}</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` 
                    res.itemText = `</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` + res.itemText
                    this.showQuestion = res
                    this.itemUuid = res.itemUuid
                    this.showExamCount = false
                    this.loading = false
                    // this.onGetItemNavigation(this.practiceUuid,'')
                })
            } else {
                getItem({ practiceUuid: practiceUuid, itemNo: itemNo,itemType:this.itemType||"" }).then(res => {

                    if (res.stuAnswer) {
                        this.selectAnswer = res.stuAnswer
                    } else {
                        this.selectAnswer = ''
                    }
                    res.itemText = res.itemText.replace(/<img/gi, '<img class="richImg" style="max-width:100%;height:auto;margin:0 auto;display:block"')
                    // `<text style="float: left;border: 1px solid #37B874;box-sizing: border-box; border-radius: 20px 20px 20px 0;padding: -4rpx 15rpx;background-color: #F3FBF7;display:inline-block;margin:0 5px -4rpx 0">${this.onChangeDict(res.type, this.mapDictCodesData.allQuestionType)}</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` 
                    res.itemText = `</text><text style="height: fit-content;float: left;">${res.itemNo}、</text>` + res.itemText
                    this.showQuestion = res
                    this.itemUuid = res.itemUuid
                    this.showExamCount = false
                    this.loading = false
                    // this.onGetItemNavigation(this.practiceUuid,'')
                })
            }

        },
        onAnswerItem(type, isChild, flag) { // 上下题
            let nowIndex = this.showQuestion.itemNo // 当前大题Index
            // let nowChildIndex = this.childIndex // 当前小题Index
            let newIndex
            let newChildIndex

            let isLast = false

            if (type === 'bottom' && !isChild) { // 下一题 大题
                if ((nowIndex + 1) > this.questionNavData.length) {
                    isLast = true
                }

                if (['判断题', '单选题'].indexOf(this.showQuestion.itemTypeName) === -1 && this.selectAnswer && !this.showQuestion.stuAnswer) {
                    console.log(this.selectAnswer, 'this.selectAnswer')
                    if (this.isCollection) {
                        getAnswers({ practiceUuid: this.practiceUuid, type: this.exerciseType, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            this.showAnalysis = true
                            console.log(res, '答题返回数据1', this.showQuestion, this.selectAnswer, this.showAnalysis);
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    } else if (this.video) {
                        getAnswerVideo({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            console.log(res, '答题返回数据', this.showQuestion);
                            this.showAnalysis = true
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    } else {
                        getAnswer({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            console.log(res, '答题返回数据', this.showQuestion);
                            this.showAnalysis = true
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    }

                }
                // else {
                //     if (this.isCollection) {
                //         if (this.showQuestion.itemNo < this.questionNavData.length) {
                //             console.log(this.showQuestion.itemNo, 'this.showQuestion.itemNo', this.questionNavData.length)
                //             this.showQuestion = this.questionNavData[this.showQuestion.itemNo]
                //             // console.log(this.questionNavData[this.showQuestion.itemNo].stuAnswer,'this.showQuestion',this.showQuestion)
                //             this.selectAnswer = this.showQuestion.stuAnswer || ''
                //         }
                //     }


                // }
                newIndex = nowIndex + 1
                newChildIndex = 0
            } else if (type === 'top' && !isChild) { // 上一题 大题
                if ((nowIndex - 1) < 1) {
                    return notificationFun('已经是第一题了！')
                }
                if (['判断题', '单选题'].indexOf(this.showQuestion.itemTypeName) === -1 && this.selectAnswer && !this.showQuestion.stuAnswer) {
                    console.log(this.selectAnswer, 'this.selectAnswer1')
                    if (this.isCollection) {
                        getAnswers({ practiceUuid: this.practiceUuid, type: this.exerciseType, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            console.log(res, '答题返回数据', this.showQuestion);
                            this.showAnalysis = true
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    } else if (this.video) {
                        getAnswerVideo({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            console.log(res, '答题返回数据', this.showQuestion);
                            this.showAnalysis = true
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    } else {
                        getAnswer({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                            this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                            this.onGetItemNavigation(this.practiceUuid, '')
                            console.log(res, '答题返回数据', this.showQuestion);
                            this.showAnalysis = true
                            // this.countDownShow = true
                            setTimeout(() => {
                                if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                    this.onAnswerItem('bottom', '', true)
                                }
                            }, 600)
                        }
                        )
                    }

                }
                // else {
                //     if (this.isCollection) {
                //         if (this.showQuestion.itemNo <= this.questionNavData.length) {
                //             this.showQuestion = this.questionNavData[this.showQuestion.itemNo - 2]
                //             console.log(this.showQuestion, 'this.showQuestion')
                //             this.selectAnswer = this.showQuestion.stuAnswer || ''
                //         }
                //     }


                // }
                newIndex = nowIndex - 1
                newChildIndex = 0
            } else if (type === 'bottom' && isChild) {
                if ((nowChildIndex + 2) > this.showQuestion.children?.length) {
                    isLast = true
                }
                newChildIndex = nowChildIndex + 1
            } else if (type === 'top' && isChild) {
                if ((nowChildIndex - 1) < 0) {
                    return notificationFun('已经是第一题了！')
                }
                newChildIndex = nowChildIndex - 1
            }

            if (isLast) {
                return notificationFun('已经是最后一题了！')
            }

            this.childIndex = newChildIndex
            if (flag || this.showQuestion.answer === this.selectAnswer) {
                this.onGetItem(this.practiceUuid, this.structUuid, newIndex, this.planId, this.publishType,)
            }
        },
        onChange(data) {
            console.log(data, 'data')
            if (this.showQuestion.stuAnswer) {
                return
            }
            //    if (this.isHistory) {
            //        return notificationFun('历史练习不能修改答案')
            //    }
            this.selectAnswer = data

            if (['判断题', '单选题'].includes(this.showQuestion.itemTypeName) || ['0101', '0201'].includes(this.showQuestion.itemType)) {
                if (this.isCollection) {
                    getAnswers({ practiceUuid: this.practiceUuid, type: this.exerciseType, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                        this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                        console.log(res, '答题返回数据', this.showQuestion);
                        this.onGetItemNavigation(this.practiceUuid, '')
                        this.showAnalysis = true
                        // this.countDownShow = true
                        setTimeout(() => {
                            if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                this.onAnswerItem('bottom', '', true)
                            }
                        }, 600)
                    }
                    )

                } else if (this.video) {
                    getAnswerVideo({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                        console.log(this.selectAnswer, 'this.selectAnswer2')
                        this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                        console.log(res, '答题返回数据', this.showQuestion);
                        this.onGetItemNavigation(this.practiceUuid, '')
                        this.showAnalysis = true
                        // this.countDownShow = true
                        setTimeout(() => {
                            if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                this.onAnswerItem('bottom', '', true)
                            }
                        }, 600)
                    }
                    )
                    console.log(this.correct+this.error,'this.correct+this.error',this.questionNavData.length);
                    
                    if(this.correct+this.error===this.questionNavData.length - 1){
                        this.submitModal = true
                    }
                } else {
                    getAnswer({ practiceUuid: this.practiceUuid, itemUuid: this.itemUuid, stuAnswer: this.selectAnswer }).then(res => {
                        console.log(this.selectAnswer, 'this.selectAnswer2')
                        this.showQuestion = { ...this.showQuestion, ...res, stuAnswer: this.selectAnswer }
                        console.log(res, '答题返回数据', this.showQuestion);
                        this.onGetItemNavigation(this.practiceUuid, '')
                        this.showAnalysis = true
                        // this.countDownShow = true
                        setTimeout(() => {
                            if (this.selectAnswer && this.showAnalysis && this.automatic) {
                                this.onAnswerItem('bottom', '', true)
                            }
                        }, 600)
                    }
                    )
                }


            } else {

                console.log('进来了')
                this.showAnalysis = true
            }

        },
        // 选择试题
        onSelectQuestion(item, index) {
            this.itemUuid = item.itemUuid
            this.itemNo = index + 1
            // if (this.isCollection) {
            //     this.showQuestion = this.questionNavData[index]
            //     this.selectAnswer = this.questionNavData[index].stuAnswer || ''
            //     this.showExamCount = false
            // } else {
            this.onGetItem(this.practiceUuid, this.structUuid, index + 1, this.planId, this.publishType)
            // }

        }
    }
}
</script>

<style>
.questionText {
    padding-top: 30rpx;
    font-weight: 400;
    font-size: 30rpx;
    line-height: 42rpx;
    color: black;
}

.circle {
    width: 48rpx;
    height: 48rpx;
    text-align: center;
    line-height: 48rpx;
    border-radius: 50%;
    background: #37B874;
    color: #fff;
}

/* 已答样式 */
.successExam {
    display: flex;
    padding: 10rpx;
    background: #F6FFF7;
    color: #FFF;
    font-size: 30rpx;
}

/* 答错样式 */
.errorExam {
    display: flex;
    padding: 10rpx;
    background: #FFF0F0;
    color: #FFF;
    font-size: 30rpx;
    border: 2rpx solid #FF5151;
    color: #FF5151 !important;
}

/* 未答样式 */
.noEditExam {
    display: flex;
    padding: 10rpx;
    background: #FFF;
    border: 2rpx solid #CCC;
    font-size: 30rpx;
}

.u-steps-item__line {
    width: 66rpx !important;
    left: 80rpx !important;
}

.gradient-button {
    border-radius: 20px;
    background: #37B874;
    color: #fff;
    font-size: 16px;
}

.hoverClass {
    opacity: 0.5;
}
</style>